<template>
  <div class="card-box">
    <div class="box-icon" @click="preview">
      <avatar :src="icon" :size="size" :shape="shape"/>
    </div>

    <div class="box-content">
      <div class="ellipsis" v-if="name">{{ name }}</div>
      <div class="ellipsis" v-if="text">{{ text }}</div>
    </div>

    <el-image-viewer :teleported="true" v-if="imgViewVisible" @close="imgViewVisible = false"
                     :url-list="[$getFileUri(icon)]"/>
  </div>
</template>

<script setup lang="ts">
import Avatar from "/@/components/biz/avatar.vue";
// 查看图片
const imgViewVisible = ref(false);

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  // 名称
  name: {
    type: String,
    default: ''
  },
  // 文本
  text: {
    type: String,
    default: ''
  },
  shape: {
    type: [String, Number],
    default: 'circle'
  },
  size: {
    type: [String, Number],
    default: ''
  },
})

const preview = () => {
  if (!props.icon) return;
  imgViewVisible.value = true;
}

</script>

<style scoped lang="scss">
.card-box {

  .box-icon {
    cursor: pointer;
  }

  .box-content {
    margin-left: 8px;
  }


}
</style>
